<template>
  <el-dialog
    title="题目预览"
    :visible="ProviewdialogVisible"
    width="50%"
    :before-close="proviewClose"
    @close='proviewClose'
  >
    <div class="proview-container">
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【题型】: {{ FormatQuestionType(ProviewData.questionType) }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【编号】: {{ ProviewData.id }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【难度】: {{ FormatDifficulty(ProviewData.difficulty) }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【标签】: {{ ProviewData.tags }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【学科】: {{ ProviewData.subjectName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【目录】: {{ ProviewData.directoryName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【方向】: {{ ProviewData.direction }}
          </div></el-col
        >
      </el-row>
      <hr />
      【题干】:
      <div class="img-container" v-if="ProviewData.questionType === '1'">
        <p
          style="color: blue"
          v-html="formatQuestion(ProviewData.question)"
        ></p>
        单选题 选项 : (以下选中的选项为正确答案)
        <el-radio-group v-model="radio" class="el-group">
          <el-radio
            v-for="item in ProviewData.options"
            :key="item.id"
            class="el-radio"
            :label="item.isRight"
            disabled
            text-color
            fill="#409eff"
          >
            {{ item.title }}</el-radio
          >
        </el-radio-group>
      </div>

      <div v-else-if="ProviewData.questionType === '2'">
        <p
          style="color: blue"
          v-html="formatQuestion(ProviewData.question)"
        ></p>
        多选题 选项 : (以下选中的选项为正确答案)
        <el-checkbox-group v-model="checkboxArr" class="el-group">
          <el-checkbox
            v-for="item in ProviewData.options"
            :key="item.id"
            class="el-radio"
            :label="item.isRight"
            disabled
          >
            {{ item.title }}
          </el-checkbox>
        </el-checkbox-group>
      </div>

      <div v-else-if="ProviewData.questionType === '3'">
        <p
          style="color: blue"
          v-html="formatQuestion(ProviewData.question)"
        ></p>
      </div>

      <hr />
      <el-row>
        <el-col :span="20">
          【参考答案】:
          <el-button @click="videoClick" type="danger">视频答案预览</el-button>
        </el-col>
        <el-col :span="10" v-show="videoShow">
          <video class="proview-video" controls :src="ProviewData.videoURL" />
        </el-col>
      </el-row>
      <hr />
      <el-row class="row-answer">
        <span>
          【答案解析】:
          <span class="row-answer" v-html="FormatAnswer(ProviewData.answer)"></span>
          <!-- {{ FormatAnswer(ProviewData.answer) }} -->
        </span>
      </el-row>
      <hr />
      <el-row> 【题目备注】: {{ ProviewData.remarks }} </el-row>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="proviewClose">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    // 显示隐藏对话框
    ProviewdialogVisible: {
      type: Boolean
    },
    // 预览数据
    ProviewData: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      radio: 1,
      checkboxArr: [1],
      videoShow: false
    }
  },
  methods: {
    created () {
      this.hDetail()
    },
    FormatQuestionType (type) {
      // console.log(type)
      switch (type) {
        case '1':
          return '单选题'
        case '2':
          return '多选题'
        case '3':
          return '简答题'
      }
    },
    FormatDifficulty (type) {
      switch (type) {
        case '1':
          return '简单'
        case '2':
          return '一般'
        case '3':
          return '困难'
      }
    },
    formatQuestion (value) {
      return value
    },
    FormatAnswer (value) {
      // console.log(value)
      if (value) {
        // const arr = value.split('')
        // const first = arr.indexOf('>')
        // const last = arr.lastIndexOf('<')
        // return arr
        //   .map((item, index) => {
        //     if (index > first && index < last) {
        //       return item
        //     }
        //   })
        //   .join('')
        const arr = value.split('')
        console.log(arr.splice(2, 0, ' ', 'style="display:inline;"').join(''))
        // console.log(arr.join(''))
        return arr.join('')
        // console.log(arr.join(''))
      }
    },
    videoClick () {
      this.videoShow = true
    },
    proviewClose () {
      this.$emit('proview-close')
      this.videoShow = false
    }

  }
}
</script>

<style scoped lang="scss">
.proview-video {
  width: 100%;
  height: 100%;
}
/* .bottom */
.row-answer {
  margin: 15px 0;
  p {
    display: inline;
  }
}
.el-group {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  .el-radio ::v-deep .el-radio__inner {
    border: 1px solid #dcdfe6;
    background-color: #fff;
  }
  .el-radio
    ::v-deep
    .el-radio__input.is-disabled.is-checked
    .el-radio__inner::after {
    background-color: #fff;
  }
  ::v-deep .el-radio__input.is-disabled + span.el-radio__label {
    // color: #409eff;
    color: #606266;
  }
  ::v-deep .el-radio__input.is-checked .el-radio__inner {
    border-color: #409eff;
    background: #409eff;
  }
}
.container-answer {
  display: flex;
}
.el-radio {
  margin-bottom: 10px;
}
.el-row {
  // margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  margin-bottom: 10px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  line-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.img-container {
  ::v-deep img {
    display: inline-block !important;
    width: 250px !important;
    height: 200px !important;
  }
}
</style>
